{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "fe8fbe33",
   "metadata": {},
   "source": [
    "# 柱状图"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "d9b1524f",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <a href=\"https://bokeh.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"1002\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  const force = true;\n",
       "\n",
       "  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
       "    root._bokeh_onload_callbacks = [];\n",
       "    root._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "  const JS_MIME_TYPE = 'application/javascript';\n",
       "  const HTML_MIME_TYPE = 'text/html';\n",
       "  const EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
       "  const CLASS_NAME = 'output_bokeh rendered_html';\n",
       "\n",
       "  /**\n",
       "   * Render data to the DOM node\n",
       "   */\n",
       "  function render(props, node) {\n",
       "    const script = document.createElement(\"script\");\n",
       "    node.appendChild(script);\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when an output is cleared or removed\n",
       "   */\n",
       "  function handleClearOutput(event, handle) {\n",
       "    const cell = handle.cell;\n",
       "\n",
       "    const id = cell.output_area._bokeh_element_id;\n",
       "    const server_id = cell.output_area._bokeh_server_id;\n",
       "    // Clean up Bokeh references\n",
       "    if (id != null && id in Bokeh.index) {\n",
       "      Bokeh.index[id].model.document.clear();\n",
       "      delete Bokeh.index[id];\n",
       "    }\n",
       "\n",
       "    if (server_id !== undefined) {\n",
       "      // Clean up Bokeh references\n",
       "      const cmd_clean = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
       "      cell.notebook.kernel.execute(cmd_clean, {\n",
       "        iopub: {\n",
       "          output: function(msg) {\n",
       "            const id = msg.content.text.trim();\n",
       "            if (id in Bokeh.index) {\n",
       "              Bokeh.index[id].model.document.clear();\n",
       "              delete Bokeh.index[id];\n",
       "            }\n",
       "          }\n",
       "        }\n",
       "      });\n",
       "      // Destroy server and session\n",
       "      const cmd_destroy = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
       "      cell.notebook.kernel.execute(cmd_destroy);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when a new output is added\n",
       "   */\n",
       "  function handleAddOutput(event, handle) {\n",
       "    const output_area = handle.output_area;\n",
       "    const output = handle.output;\n",
       "\n",
       "    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
       "    if ((output.output_type != \"display_data\") || (!Object.prototype.hasOwnProperty.call(output.data, EXEC_MIME_TYPE))) {\n",
       "      return\n",
       "    }\n",
       "\n",
       "    const toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
       "      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
       "      // store reference to embed id on output_area\n",
       "      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "    }\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "      const bk_div = document.createElement(\"div\");\n",
       "      bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "      const script_attrs = bk_div.children[0].attributes;\n",
       "      for (let i = 0; i < script_attrs.length; i++) {\n",
       "        toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "        toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent\n",
       "      }\n",
       "      // store reference to server id on output_area\n",
       "      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "    }\n",
       "  }\n",
       "\n",
       "  function register_renderer(events, OutputArea) {\n",
       "\n",
       "    function append_mime(data, metadata, element) {\n",
       "      // create a DOM node to render to\n",
       "      const toinsert = this.create_output_subarea(\n",
       "        metadata,\n",
       "        CLASS_NAME,\n",
       "        EXEC_MIME_TYPE\n",
       "      );\n",
       "      this.keyboard_manager.register_events(toinsert);\n",
       "      // Render to node\n",
       "      const props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "      render(props, toinsert[toinsert.length - 1]);\n",
       "      element.append(toinsert);\n",
       "      return toinsert\n",
       "    }\n",
       "\n",
       "    /* Handle when an output is cleared or removed */\n",
       "    events.on('clear_output.CodeCell', handleClearOutput);\n",
       "    events.on('delete.Cell', handleClearOutput);\n",
       "\n",
       "    /* Handle when a new output is added */\n",
       "    events.on('output_added.OutputArea', handleAddOutput);\n",
       "\n",
       "    /**\n",
       "     * Register the mime type and append_mime function with output_area\n",
       "     */\n",
       "    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "      /* Is output safe? */\n",
       "      safe: true,\n",
       "      /* Index of renderer in `output_area.display_order` */\n",
       "      index: 0\n",
       "    });\n",
       "  }\n",
       "\n",
       "  // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
       "  if (root.Jupyter !== undefined) {\n",
       "    const events = require('base/js/events');\n",
       "    const OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  \n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  const NB_LOAD_WARNING = {'data': {'text/html':\n",
       "     \"<div style='background-color: #fdd'>\\n\"+\n",
       "     \"<p>\\n\"+\n",
       "     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
       "     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
       "     \"</p>\\n\"+\n",
       "     \"<ul>\\n\"+\n",
       "     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n",
       "     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n",
       "     \"</ul>\\n\"+\n",
       "     \"<code>\\n\"+\n",
       "     \"from bokeh.resources import INLINE\\n\"+\n",
       "     \"output_notebook(resources=INLINE)\\n\"+\n",
       "     \"</code>\\n\"+\n",
       "     \"</div>\"}};\n",
       "\n",
       "  function display_loaded() {\n",
       "    const el = document.getElementById(\"1002\");\n",
       "    if (el != null) {\n",
       "      el.textContent = \"BokehJS is loading...\";\n",
       "    }\n",
       "    if (root.Bokeh !== undefined) {\n",
       "      if (el != null) {\n",
       "        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n",
       "      }\n",
       "    } else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(display_loaded, 100)\n",
       "    }\n",
       "  }\n",
       "\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) {\n",
       "        if (callback != null)\n",
       "          callback();\n",
       "      });\n",
       "    } finally {\n",
       "      delete root._bokeh_onload_callbacks\n",
       "    }\n",
       "    console.debug(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(css_urls, js_urls, callback) {\n",
       "    if (css_urls == null) css_urls = [];\n",
       "    if (js_urls == null) js_urls = [];\n",
       "\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls == null || js_urls.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    root._bokeh_is_loading = css_urls.length + js_urls.length;\n",
       "\n",
       "    function on_load() {\n",
       "      root._bokeh_is_loading--;\n",
       "      if (root._bokeh_is_loading === 0) {\n",
       "        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n",
       "        run_callbacks()\n",
       "      }\n",
       "    }\n",
       "\n",
       "    function on_error(url) {\n",
       "      console.error(\"failed to load \" + url);\n",
       "    }\n",
       "\n",
       "    for (let i = 0; i < css_urls.length; i++) {\n",
       "      const url = css_urls[i];\n",
       "      const element = document.createElement(\"link\");\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error.bind(null, url);\n",
       "      element.rel = \"stylesheet\";\n",
       "      element.type = \"text/css\";\n",
       "      element.href = url;\n",
       "      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n",
       "      document.body.appendChild(element);\n",
       "    }\n",
       "\n",
       "    for (let i = 0; i < js_urls.length; i++) {\n",
       "      const url = js_urls[i];\n",
       "      const element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error.bind(null, url);\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "  };\n",
       "\n",
       "  function inject_raw_css(css) {\n",
       "    const element = document.createElement(\"style\");\n",
       "    element.appendChild(document.createTextNode(css));\n",
       "    document.body.appendChild(element);\n",
       "  }\n",
       "\n",
       "  \n",
       "  const js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js\"];\n",
       "  const css_urls = [];\n",
       "  \n",
       "\n",
       "  const inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    function(Bokeh) {\n",
       "    \n",
       "    \n",
       "    }\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    \n",
       "    if (root.Bokeh !== undefined || force === true) {\n",
       "      \n",
       "    for (let i = 0; i < inline_js.length; i++) {\n",
       "      inline_js[i].call(root, root.Bokeh);\n",
       "    }\n",
       "    if (force === true) {\n",
       "        display_loaded();\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    } else if (force !== true) {\n",
       "      const cell = $(document.getElementById(\"1002\")).parents('.cell').data().cell;\n",
       "      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "    }\n",
       "\n",
       "  }\n",
       "\n",
       "  if (root._bokeh_is_loading === 0) {\n",
       "    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(css_urls, js_urls, function() {\n",
       "      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(window));"
      ],
      "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  const force = true;\n\n  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n    root._bokeh_onload_callbacks = [];\n    root._bokeh_is_loading = undefined;\n  }\n\n  \n\n  \n  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  const NB_LOAD_WARNING = {'data': {'text/html':\n     \"<div style='background-color: #fdd'>\\n\"+\n     \"<p>\\n\"+\n     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n     \"</p>\\n\"+\n     \"<ul>\\n\"+\n     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n     \"</ul>\\n\"+\n     \"<code>\\n\"+\n     \"from bokeh.resources import INLINE\\n\"+\n     \"output_notebook(resources=INLINE)\\n\"+\n     \"</code>\\n\"+\n     \"</div>\"}};\n\n  function display_loaded() {\n    const el = document.getElementById(\"1002\");\n    if (el != null) {\n      el.textContent = \"BokehJS is loading...\";\n    }\n    if (root.Bokeh !== undefined) {\n      if (el != null) {\n        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n      }\n    } else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(display_loaded, 100)\n    }\n  }\n\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) {\n        if (callback != null)\n          callback();\n      });\n    } finally {\n      delete root._bokeh_onload_callbacks\n    }\n    console.debug(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(css_urls, js_urls, callback) {\n    if (css_urls == null) css_urls = [];\n    if (js_urls == null) js_urls = [];\n\n    root._bokeh_onload_callbacks.push(callback);\n    if (root._bokeh_is_loading > 0) {\n      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls == null || js_urls.length === 0) {\n      run_callbacks();\n      return null;\n    }\n    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n    function on_load() {\n      root._bokeh_is_loading--;\n      if (root._bokeh_is_loading === 0) {\n        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n        run_callbacks()\n      }\n    }\n\n    function on_error(url) {\n      console.error(\"failed to load \" + url);\n    }\n\n    for (let i = 0; i < css_urls.length; i++) {\n      const url = css_urls[i];\n      const element = document.createElement(\"link\");\n      element.onload = on_load;\n      element.onerror = on_error.bind(null, url);\n      element.rel = \"stylesheet\";\n      element.type = \"text/css\";\n      element.href = url;\n      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n      document.body.appendChild(element);\n    }\n\n    for (let i = 0; i < js_urls.length; i++) {\n      const url = js_urls[i];\n      const element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error.bind(null, url);\n      element.async = false;\n      element.src = url;\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n  };\n\n  function inject_raw_css(css) {\n    const element = document.createElement(\"style\");\n    element.appendChild(document.createTextNode(css));\n    document.body.appendChild(element);\n  }\n\n  \n  const js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js\"];\n  const css_urls = [];\n  \n\n  const inline_js = [\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    function(Bokeh) {\n    \n    \n    }\n  ];\n\n  function run_inline_js() {\n    \n    if (root.Bokeh !== undefined || force === true) {\n      \n    for (let i = 0; i < inline_js.length; i++) {\n      inline_js[i].call(root, root.Bokeh);\n    }\n    if (force === true) {\n        display_loaded();\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    } else if (force !== true) {\n      const cell = $(document.getElementById(\"1002\")).parents('.cell').data().cell;\n      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n    }\n\n  }\n\n  if (root._bokeh_is_loading === 0) {\n    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n    run_inline_js();\n  } else {\n    load_libs(css_urls, js_urls, function() {\n      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n      run_inline_js();\n    });\n  }\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# 准备工作\n",
    "from bokeh.plotting import output_notebook,figure,show\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3d436b07",
   "metadata": {},
   "source": [
    "## 垂直柱状图"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "4f30f9b8",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"1809b256-9a05-40b9-a8ae-98ec945115a2\" data-root-id=\"1003\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  const docs_json = {\"09a12498-cd02-4718-8011-39cc11c4c408\":{\"defs\":[],\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"1012\"}],\"center\":[{\"id\":\"1015\"},{\"id\":\"1019\"}],\"height\":300,\"left\":[{\"id\":\"1016\"}],\"renderers\":[{\"id\":\"1038\"}],\"title\":{\"id\":\"1040\"},\"toolbar\":{\"id\":\"1027\"},\"width\":300,\"x_range\":{\"id\":\"1004\"},\"x_scale\":{\"id\":\"1008\"},\"y_range\":{\"id\":\"1006\"},\"y_scale\":{\"id\":\"1010\"}},\"id\":\"1003\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"axis\":{\"id\":\"1016\"},\"coordinates\":null,\"dimension\":1,\"group\":null,\"ticker\":null},\"id\":\"1019\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1048\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"data\":{\"top\":[1.3,2.4,3.7],\"x\":[1,2,3]},\"selected\":{\"id\":\"1049\"},\"selection_policy\":{\"id\":\"1048\"}},\"id\":\"1034\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"tools\":[{\"id\":\"1020\"},{\"id\":\"1021\"},{\"id\":\"1022\"},{\"id\":\"1023\"},{\"id\":\"1024\"},{\"id\":\"1025\"}]},\"id\":\"1027\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"1046\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"bottom_units\":\"screen\",\"coordinates\":null,\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"group\":null,\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"syncable\":false,\"top_units\":\"screen\"},\"id\":\"1026\",\"type\":\"BoxAnnotation\"},{\"attributes\":{},\"id\":\"1006\",\"type\":\"DataRange1d\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.2},\"fill_color\":{\"value\":\"pink\"},\"hatch_alpha\":{\"value\":0.2},\"hatch_color\":{\"value\":\"pink\"},\"line_alpha\":{\"value\":0.2},\"line_color\":{\"value\":\"pink\"},\"top\":{\"field\":\"top\"},\"width\":{\"value\":0.7},\"x\":{\"field\":\"x\"}},\"id\":\"1037\",\"type\":\"VBar\"},{\"attributes\":{},\"id\":\"1020\",\"type\":\"PanTool\"},{\"attributes\":{\"fill_color\":{\"value\":\"pink\"},\"hatch_color\":{\"value\":\"pink\"},\"line_color\":{\"value\":\"pink\"},\"top\":{\"field\":\"top\"},\"width\":{\"value\":0.7},\"x\":{\"field\":\"x\"}},\"id\":\"1035\",\"type\":\"VBar\"},{\"attributes\":{},\"id\":\"1024\",\"type\":\"ResetTool\"},{\"attributes\":{\"coordinates\":null,\"formatter\":{\"id\":\"1046\"},\"group\":null,\"major_label_policy\":{\"id\":\"1047\"},\"ticker\":{\"id\":\"1013\"}},\"id\":\"1012\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"1021\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"overlay\":{\"id\":\"1026\"}},\"id\":\"1022\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"1044\",\"type\":\"AllLabels\"},{\"attributes\":{},\"id\":\"1013\",\"type\":\"BasicTicker\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"pink\"},\"hatch_alpha\":{\"value\":0.1},\"hatch_color\":{\"value\":\"pink\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"pink\"},\"top\":{\"field\":\"top\"},\"width\":{\"value\":0.7},\"x\":{\"field\":\"x\"}},\"id\":\"1036\",\"type\":\"VBar\"},{\"attributes\":{\"coordinates\":null,\"group\":null},\"id\":\"1040\",\"type\":\"Title\"},{\"attributes\":{},\"id\":\"1023\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"1025\",\"type\":\"HelpTool\"},{\"attributes\":{},\"id\":\"1043\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"source\":{\"id\":\"1034\"}},\"id\":\"1039\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"1008\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"1010\",\"type\":\"LinearScale\"},{\"attributes\":{\"coordinates\":null,\"data_source\":{\"id\":\"1034\"},\"glyph\":{\"id\":\"1035\"},\"group\":null,\"hover_glyph\":null,\"muted_glyph\":{\"id\":\"1037\"},\"nonselection_glyph\":{\"id\":\"1036\"},\"view\":{\"id\":\"1039\"}},\"id\":\"1038\",\"type\":\"GlyphRenderer\"},{\"attributes\":{},\"id\":\"1047\",\"type\":\"AllLabels\"},{\"attributes\":{},\"id\":\"1004\",\"type\":\"DataRange1d\"},{\"attributes\":{\"axis\":{\"id\":\"1012\"},\"coordinates\":null,\"group\":null,\"ticker\":null},\"id\":\"1015\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1017\",\"type\":\"BasicTicker\"},{\"attributes\":{},\"id\":\"1049\",\"type\":\"Selection\"},{\"attributes\":{\"coordinates\":null,\"formatter\":{\"id\":\"1043\"},\"group\":null,\"major_label_policy\":{\"id\":\"1044\"},\"ticker\":{\"id\":\"1017\"}},\"id\":\"1016\",\"type\":\"LinearAxis\"}],\"root_ids\":[\"1003\"]},\"title\":\"Bokeh Application\",\"version\":\"2.4.2\"}};\n",
       "  const render_items = [{\"docid\":\"09a12498-cd02-4718-8011-39cc11c4c408\",\"root_ids\":[\"1003\"],\"roots\":{\"1003\":\"1809b256-9a05-40b9-a8ae-98ec945115a2\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    let attempts = 0;\n",
       "    const timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else {\n",
       "        attempts++;\n",
       "        if (attempts > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "1003"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "#画布\n",
    "p = figure(plot_width=300, plot_height=300)\n",
    "#柱状图属性\n",
    "p.vbar(x=[1, 2, 3],\n",
    "       width=0.7, \n",
    "       bottom=0,\n",
    "       top=[1.3, 2.4, 3.7],\n",
    "       color=\"pink\")\n",
    "#展示\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "08287273",
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Help on method vbar in module bokeh.plotting.glyph_api:\n",
      "\n",
      "vbar(x='x', width=1, top='top', bottom=0, *, fill_alpha=1.0, fill_color='gray', hatch_alpha=1.0, hatch_color='black', hatch_extra={}, hatch_pattern=None, hatch_scale=12.0, hatch_weight=1.0, line_alpha=1.0, line_cap='butt', line_color='black', line_dash=[], line_dash_offset=0, line_join='bevel', line_width=1, name=None, syncable=True, tags=[], **kwargs) method of bokeh.plotting.figure.Figure instance\n",
      "    Configure and add :class:`~bokeh.models.glyphs.VBar` glyphs to this Figure.\n",
      "    \n",
      "    Args:\n",
      "        x (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The x-coordinates of the centers of the vertical bars. (default: 'x')\n",
      "    \n",
      "        width (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The widths of the vertical bars. (default: 1)\n",
      "    \n",
      "        top (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The y-coordinates of the top edges. (default: 'top')\n",
      "    \n",
      "        bottom (:class:`~bokeh.core.properties.NumberSpec`\\ ):\n",
      "            The y-coordinates of the bottom edges. (default: 0)\n",
      "    \n",
      "    \n",
      "    Keyword args:\n",
      "        fill_alpha (:class:`~bokeh.core.properties.AlphaSpec`\\ , optional):\n",
      "            The fill alpha values for the vertical bars. (default: 1.0)\n",
      "    \n",
      "        fill_color (:class:`~bokeh.core.properties.ColorSpec`\\ , optional):\n",
      "            The fill color values for the vertical bars. (default: 'gray')\n",
      "    \n",
      "        hatch_alpha (:class:`~bokeh.core.properties.AlphaSpec`\\ , optional):\n",
      "            The hatch alpha values for the vertical bars. (default: 1.0)\n",
      "    \n",
      "        hatch_color (:class:`~bokeh.core.properties.ColorSpec`\\ , optional):\n",
      "            The hatch color values for the vertical bars. (default: 'black')\n",
      "    \n",
      "        hatch_extra (:class:`~bokeh.core.properties.Dict`\\ (:class:`~bokeh.core.properties.String`\\ , :class:`~bokeh.core.properties.Instance`\\ (:class:`~bokeh.models.textures.Texture`\\ ))):\n",
      "            The hatch extra values for the vertical bars. (default: {})\n",
      "    \n",
      "        hatch_pattern (:class:`~bokeh.core.properties.HatchPatternSpec`\\ ):\n",
      "            The hatch pattern values for the vertical bars.\n",
      "    \n",
      "        hatch_scale (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The hatch scale values for the vertical bars. (default: 12.0)\n",
      "    \n",
      "        hatch_weight (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The hatch weight values for the vertical bars. (default: 1.0)\n",
      "    \n",
      "        line_alpha (:class:`~bokeh.core.properties.AlphaSpec`\\ , optional):\n",
      "            The line alpha values for the vertical bars. (default: 1.0)\n",
      "    \n",
      "        line_cap (:class:`~bokeh.core.properties.LineCapSpec`\\ , optional):\n",
      "            The line cap values for the vertical bars. (default: 'butt')\n",
      "    \n",
      "        line_color (:class:`~bokeh.core.properties.ColorSpec`\\ , optional):\n",
      "            The line color values for the vertical bars. (default: 'black')\n",
      "    \n",
      "        line_dash (:class:`~bokeh.core.properties.DashPatternSpec`\\ ):\n",
      "            The line dash values for the vertical bars. (default: [])\n",
      "    \n",
      "        line_dash_offset (:class:`~bokeh.core.properties.IntSpec`\\ ):\n",
      "            The line dash offset values for the vertical bars. (default: 0)\n",
      "    \n",
      "        line_join (:class:`~bokeh.core.properties.LineJoinSpec`\\ , optional):\n",
      "            The line join values for the vertical bars. (default: 'bevel')\n",
      "    \n",
      "        line_width (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The line width values for the vertical bars. (default: 1)\n",
      "    \n",
      "        name (:class:`~bokeh.core.properties.Nullable`\\ (:class:`~bokeh.core.properties.String`\\ )):\n",
      "            An arbitrary, user-supplied name for this model.\n",
      "        \n",
      "            This name can be useful when querying the document to retrieve specific\n",
      "            Bokeh models.\n",
      "        \n",
      "            .. code:: python\n",
      "        \n",
      "                >>> plot.circle([1,2,3], [4,5,6], name=\"temp\")\n",
      "                >>> plot.select(name=\"temp\")\n",
      "                [GlyphRenderer(id='399d53f5-73e9-44d9-9527-544b761c7705', ...)]\n",
      "        \n",
      "            .. note::\n",
      "                No uniqueness guarantees or other conditions are enforced on any names\n",
      "                that are provided, nor is the name used directly by Bokeh for any\n",
      "                reason.\n",
      "    \n",
      "        syncable (:class:`~bokeh.core.properties.Bool`\\ , optional):\n",
      "            Indicates whether this model should be synchronized back to a Bokeh server when\n",
      "            updated in a web browser. Setting to ``False`` may be useful to reduce network\n",
      "            traffic when dealing with frequently updated objects whose updated values we\n",
      "            don't need.\n",
      "        \n",
      "            .. note::\n",
      "                Setting this property to ``False`` will prevent any ``on_change()`` callbacks\n",
      "                on this object from triggering. However, any JS-side callbacks will still\n",
      "                work. (default: True)\n",
      "    \n",
      "        tags (:class:`~bokeh.core.properties.List`\\ ):\n",
      "            An optional list of arbitrary, user-supplied values to attach to this\n",
      "            model.\n",
      "        \n",
      "            This data can be useful when querying the document to retrieve specific\n",
      "            Bokeh models:\n",
      "        \n",
      "            .. code:: python\n",
      "        \n",
      "                >>> r = plot.circle([1,2,3], [4,5,6])\n",
      "                >>> r.tags = [\"foo\", 10]\n",
      "                >>> plot.select(tags=['foo', 10])\n",
      "                [GlyphRenderer(id='1de4c3df-a83d-480a-899b-fb263d3d5dd9', ...)]\n",
      "        \n",
      "            Or simply a convenient way to attach any necessary metadata to a model\n",
      "            that can be accessed by ``CustomJS`` callbacks, etc.\n",
      "        \n",
      "            .. note::\n",
      "                No uniqueness guarantees or other conditions are enforced on any tags\n",
      "                that are provided, nor are the tags used directly by Bokeh for any\n",
      "                reason. (default: [])\n",
      "    \n",
      "    \n",
      "    \n",
      "    Other Parameters:\n",
      "        alpha (float, optional) :\n",
      "            An alias to set all alpha keyword arguments at once. (default: None)\n",
      "    \n",
      "            Alpha values must be between 0 (fully transparent) and 1 (fully opaque).\n",
      "    \n",
      "            Any explicitly set values for ``line_alpha``, etc. will override this\n",
      "            setting.\n",
      "    \n",
      "        color (color, optional) :\n",
      "            An alias to set all color keyword arguments at once. (default: None)\n",
      "    \n",
      "            See :ref:`userguide_styling_colors` in the user guide for different\n",
      "            options to define colors.\n",
      "    \n",
      "            Any explicitly set values for ``line_color``, etc. will override this\n",
      "            setting.\n",
      "    \n",
      "        legend_field (str, optional) :\n",
      "            Specify that the glyph should produce multiple legend entries by\n",
      "            :ref:`grouping them in the browser <userguide_annotations_legends_legend_field>`.\n",
      "            The value of this parameter is the name of a column in the data source\n",
      "            that should be used or the grouping.\n",
      "    \n",
      "            The grouping is performed *in JavaScript*, at the time time the Bokeh\n",
      "            content is rendered in the browser. If the data is subsequently updated,\n",
      "            the legend will automatically re-group.\n",
      "    \n",
      "            .. note::\n",
      "                Only one of ``legend_field``, ``legend_group``, or ``legend_label``\n",
      "                should be supplied\n",
      "    \n",
      "        legend_group (str, optional) :\n",
      "            Specify that the glyph should produce multiple legend entries by\n",
      "            :ref:`grouping them in Python <userguide_annotations_legends_legend_group>`.\n",
      "            The value of this parameter is the name of a column in the data source\n",
      "            that should be used or the grouping.\n",
      "    \n",
      "            The grouping is performed in Python, before the Bokeh output is sent to\n",
      "            a browser. If the date is subsequently updated, the legend will *not*\n",
      "            automatically re-group.\n",
      "    \n",
      "            .. note::\n",
      "                Only one of ``legend_field``, ``legend_group``, or ``legend_label``\n",
      "                should be supplied\n",
      "    \n",
      "        legend_label (str, optional) :\n",
      "            Specify that the glyph should produce a single\n",
      "            :ref:`basic legend label <userguide_annotations_legends_legend_label>` in\n",
      "            the legend. The legend entry is labeled with the exact text supplied\n",
      "            here.\n",
      "    \n",
      "            .. note::\n",
      "                Only one of ``legend_field``, ``legend_group``, or ``legend_label``\n",
      "                should be supplied.\n",
      "    \n",
      "        muted (bool, optionall) :\n",
      "            Whether the glyph should be rendered as muted (default: False)\n",
      "    \n",
      "            For this to be useful, an ``muted_glyph`` must be configured on the\n",
      "            returned ``GlyphRender``. This can be done by explicitly creating a\n",
      "            ``Glyph`` to use, or more simply by passing e.g. ``muted_color``, etc.\n",
      "            to this glyph function.\n",
      "    \n",
      "        name (str, optional) :\n",
      "            An optional user-supplied name to attach to the renderer (default: None)\n",
      "    \n",
      "            Bokeh does not use this value in any way, but it may be useful for\n",
      "            searching a Bokeh document to find a specific model.\n",
      "    \n",
      "        source (ColumnDataSource, optional) :\n",
      "            A user-supplied data source. (defatult: None)\n",
      "    \n",
      "            If not supplied, Bokeh will automatically construct an internal\n",
      "            ``ColumnDataSource`` with default column names from the coordinates and\n",
      "            other arguments that were passed-in as literal list or array values.\n",
      "    \n",
      "            If supplied, Bokeh will use the supplied data source to drive the glyph.\n",
      "            In this case, literal list or arrays may not be used for coordinates or\n",
      "            other arguments. Only singular fixed valued (e.g. ``x=10``) or column\n",
      "            names in the data source (e.g. ``x=\"time\"``) are permitted.\n",
      "    \n",
      "        view (CDSView, optional) :\n",
      "            A view for filtering the data source. (default: None)\n",
      "    \n",
      "        visible (bool, optional) :\n",
      "            Whether the glyph should be rendered. (default: True)\n",
      "    \n",
      "        x_range_name (str, optional) :\n",
      "            The name of an extra range to use for mapping x-coordinates.\n",
      "            (default: None)\n",
      "    \n",
      "            If not supplied, then the default ``y_range`` of the plot will be used\n",
      "            for coordinate mapping.\n",
      "    \n",
      "        y_range_name (str, optional) :\n",
      "            The name of an extra range to use for mapping y-coordinates.\n",
      "            (default: None)\n",
      "    \n",
      "            If not supplied, then the default ``y_range`` of the plot will be used\n",
      "            for coordinate mapping.\n",
      "    \n",
      "        level (RenderLevel, optional) :\n",
      "            Specify the render level order for this glyph.\n",
      "    \n",
      "    \n",
      "    \n",
      "    It is also possible to set the color and alpha parameters of extra glyphs for\n",
      "    selection, nonselection, hover, or muted. To do so, add the relevant prefix to\n",
      "    any visual parameter. For example, pass ``nonselection_alpha`` to set the line\n",
      "    and fill alpha for nonselect, or ``hover_fill_alpha`` to set the fill alpha for\n",
      "    hover. See the :ref:`userguide_styling_glyphs` section of the user guide for\n",
      "    full details.\n",
      "    \n",
      "    Returns:\n",
      "        :class:`~bokeh.models.renderers.GlyphRenderer`\n",
      "    \n",
      "    \n",
      "    Examples:\n",
      "    \n",
      "        .. code-block:: python\n",
      "    \n",
      "            from bokeh.plotting import figure, output_file, show\n",
      "    \n",
      "            plot = figure(width=300, height=300)\n",
      "            plot.vbar(x=[1, 2, 3], width=0.5, bottom=0, top=[1,2,3], color=\"#CAB2D6\")\n",
      "    \n",
      "            show(plot)\n",
      "\n"
     ]
    }
   ],
   "source": [
    "help(p.vbar)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a287e7b5",
   "metadata": {},
   "source": [
    "## 水平柱状图"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "33bc2489",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"de3eec4c-593e-49e9-8ace-63947be180d2\" data-root-id=\"1106\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  const docs_json = {\"4490a92f-3b0a-43d8-be87-a43c0996d206\":{\"defs\":[],\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"1115\"}],\"center\":[{\"id\":\"1118\"},{\"id\":\"1122\"}],\"height\":300,\"left\":[{\"id\":\"1119\"}],\"renderers\":[{\"id\":\"1141\"}],\"title\":{\"id\":\"1154\"},\"toolbar\":{\"id\":\"1130\"},\"width\":300,\"x_range\":{\"id\":\"1107\"},\"x_scale\":{\"id\":\"1111\"},\"y_range\":{\"id\":\"1109\"},\"y_scale\":{\"id\":\"1113\"}},\"id\":\"1106\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"tools\":[{\"id\":\"1123\"},{\"id\":\"1124\"},{\"id\":\"1125\"},{\"id\":\"1126\"},{\"id\":\"1127\"},{\"id\":\"1128\"}]},\"id\":\"1130\",\"type\":\"Toolbar\"},{\"attributes\":{\"coordinates\":null,\"data_source\":{\"id\":\"1137\"},\"glyph\":{\"id\":\"1138\"},\"group\":null,\"hover_glyph\":null,\"muted_glyph\":{\"id\":\"1140\"},\"nonselection_glyph\":{\"id\":\"1139\"},\"view\":{\"id\":\"1142\"}},\"id\":\"1141\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"data\":{\"right\":[1.3,2.4,3.7],\"y\":[1,2,3]},\"selected\":{\"id\":\"1163\"},\"selection_policy\":{\"id\":\"1162\"}},\"id\":\"1137\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"bottom_units\":\"screen\",\"coordinates\":null,\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"group\":null,\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"syncable\":false,\"top_units\":\"screen\"},\"id\":\"1129\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"source\":{\"id\":\"1137\"}},\"id\":\"1142\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"1123\",\"type\":\"PanTool\"},{\"attributes\":{},\"id\":\"1127\",\"type\":\"ResetTool\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"skyblue\"},\"hatch_alpha\":{\"value\":0.1},\"hatch_color\":{\"value\":\"skyblue\"},\"height\":{\"value\":0.5},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"pink\"},\"right\":{\"field\":\"right\"},\"y\":{\"field\":\"y\"}},\"id\":\"1139\",\"type\":\"HBar\"},{\"attributes\":{},\"id\":\"1124\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"overlay\":{\"id\":\"1129\"}},\"id\":\"1125\",\"type\":\"BoxZoomTool\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.2},\"fill_color\":{\"value\":\"skyblue\"},\"hatch_alpha\":{\"value\":0.2},\"hatch_color\":{\"value\":\"skyblue\"},\"height\":{\"value\":0.5},\"line_alpha\":{\"value\":0.2},\"line_color\":{\"value\":\"pink\"},\"right\":{\"field\":\"right\"},\"y\":{\"field\":\"y\"}},\"id\":\"1140\",\"type\":\"HBar\"},{\"attributes\":{},\"id\":\"1126\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"1158\",\"type\":\"AllLabels\"},{\"attributes\":{},\"id\":\"1107\",\"type\":\"DataRange1d\"},{\"attributes\":{\"coordinates\":null,\"group\":null},\"id\":\"1154\",\"type\":\"Title\"},{\"attributes\":{},\"id\":\"1128\",\"type\":\"HelpTool\"},{\"attributes\":{},\"id\":\"1116\",\"type\":\"BasicTicker\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.4},\"fill_color\":{\"value\":\"skyblue\"},\"hatch_color\":{\"value\":\"skyblue\"},\"height\":{\"value\":0.5},\"line_alpha\":{\"value\":0.3},\"line_color\":{\"value\":\"pink\"},\"right\":{\"field\":\"right\"},\"y\":{\"field\":\"y\"}},\"id\":\"1138\",\"type\":\"HBar\"},{\"attributes\":{},\"id\":\"1160\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"1162\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"coordinates\":null,\"formatter\":{\"id\":\"1160\"},\"group\":null,\"major_label_policy\":{\"id\":\"1161\"},\"ticker\":{\"id\":\"1116\"}},\"id\":\"1115\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"1161\",\"type\":\"AllLabels\"},{\"attributes\":{},\"id\":\"1111\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"1163\",\"type\":\"Selection\"},{\"attributes\":{},\"id\":\"1113\",\"type\":\"LinearScale\"},{\"attributes\":{\"axis\":{\"id\":\"1115\"},\"coordinates\":null,\"group\":null,\"ticker\":null},\"id\":\"1118\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1120\",\"type\":\"BasicTicker\"},{\"attributes\":{\"axis\":{\"id\":\"1119\"},\"coordinates\":null,\"dimension\":1,\"group\":null,\"ticker\":null},\"id\":\"1122\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1109\",\"type\":\"DataRange1d\"},{\"attributes\":{\"coordinates\":null,\"formatter\":{\"id\":\"1157\"},\"group\":null,\"major_label_policy\":{\"id\":\"1158\"},\"ticker\":{\"id\":\"1120\"}},\"id\":\"1119\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"1157\",\"type\":\"BasicTickFormatter\"}],\"root_ids\":[\"1106\"]},\"title\":\"Bokeh Application\",\"version\":\"2.4.2\"}};\n",
       "  const render_items = [{\"docid\":\"4490a92f-3b0a-43d8-be87-a43c0996d206\",\"root_ids\":[\"1106\"],\"roots\":{\"1106\":\"de3eec4c-593e-49e9-8ace-63947be180d2\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    let attempts = 0;\n",
       "    const timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else {\n",
       "        attempts++;\n",
       "        if (attempts > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "1106"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "#画布\n",
    "p = figure(plot_width=300, plot_height=300)\n",
    "#柱状图属性\n",
    "p.hbar(y=[1, 2, 3],\n",
    "       height=0.5,\n",
    "       left=0,\n",
    "       right=[1.3, 2.4, 3.7],\n",
    "       color=\"skyblue\",\n",
    "       fill_alpha=0.4,\n",
    "       line_color='pink',\n",
    "       line_alpha=0.3\n",
    "       \n",
    "      )  \n",
    "#展示\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "dd497c35",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Help on method hbar in module bokeh.plotting.glyph_api:\n",
      "\n",
      "hbar(y='y', height=1, right='right', left=0, *, fill_alpha=1.0, fill_color='gray', hatch_alpha=1.0, hatch_color='black', hatch_extra={}, hatch_pattern=None, hatch_scale=12.0, hatch_weight=1.0, line_alpha=1.0, line_cap='butt', line_color='black', line_dash=[], line_dash_offset=0, line_join='bevel', line_width=1, name=None, syncable=True, tags=[], **kwargs) method of bokeh.plotting.figure.Figure instance\n",
      "    Configure and add :class:`~bokeh.models.glyphs.HBar` glyphs to this Figure.\n",
      "    \n",
      "    Args:\n",
      "        y (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The y-coordinates of the centers of the horizontal bars. (default: 'y')\n",
      "    \n",
      "        height (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The heights of the vertical bars. (default: 1)\n",
      "    \n",
      "        right (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The x-coordinates of the right edges. (default: 'right')\n",
      "    \n",
      "        left (:class:`~bokeh.core.properties.NumberSpec`\\ ):\n",
      "            The x-coordinates of the left edges. (default: 0)\n",
      "    \n",
      "    \n",
      "    Keyword args:\n",
      "        fill_alpha (:class:`~bokeh.core.properties.AlphaSpec`\\ , optional):\n",
      "            The fill alpha values for the horizontal bars. (default: 1.0)\n",
      "    \n",
      "        fill_color (:class:`~bokeh.core.properties.ColorSpec`\\ , optional):\n",
      "            The fill color values for the horizontal bars. (default: 'gray')\n",
      "    \n",
      "        hatch_alpha (:class:`~bokeh.core.properties.AlphaSpec`\\ , optional):\n",
      "            The hatch alpha values for the horizontal bars. (default: 1.0)\n",
      "    \n",
      "        hatch_color (:class:`~bokeh.core.properties.ColorSpec`\\ , optional):\n",
      "            The hatch color values for the horizontal bars. (default: 'black')\n",
      "    \n",
      "        hatch_extra (:class:`~bokeh.core.properties.Dict`\\ (:class:`~bokeh.core.properties.String`\\ , :class:`~bokeh.core.properties.Instance`\\ (:class:`~bokeh.models.textures.Texture`\\ ))):\n",
      "            The hatch extra values for the horizontal bars. (default: {})\n",
      "    \n",
      "        hatch_pattern (:class:`~bokeh.core.properties.HatchPatternSpec`\\ ):\n",
      "            The hatch pattern values for the horizontal bars.\n",
      "    \n",
      "        hatch_scale (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The hatch scale values for the horizontal bars. (default: 12.0)\n",
      "    \n",
      "        hatch_weight (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The hatch weight values for the horizontal bars. (default: 1.0)\n",
      "    \n",
      "        line_alpha (:class:`~bokeh.core.properties.AlphaSpec`\\ , optional):\n",
      "            The line alpha values for the horizontal bars. (default: 1.0)\n",
      "    \n",
      "        line_cap (:class:`~bokeh.core.properties.LineCapSpec`\\ , optional):\n",
      "            The line cap values for the horizontal bars. (default: 'butt')\n",
      "    \n",
      "        line_color (:class:`~bokeh.core.properties.ColorSpec`\\ , optional):\n",
      "            The line color values for the horizontal bars. (default: 'black')\n",
      "    \n",
      "        line_dash (:class:`~bokeh.core.properties.DashPatternSpec`\\ ):\n",
      "            The line dash values for the horizontal bars. (default: [])\n",
      "    \n",
      "        line_dash_offset (:class:`~bokeh.core.properties.IntSpec`\\ ):\n",
      "            The line dash offset values for the horizontal bars. (default: 0)\n",
      "    \n",
      "        line_join (:class:`~bokeh.core.properties.LineJoinSpec`\\ , optional):\n",
      "            The line join values for the horizontal bars. (default: 'bevel')\n",
      "    \n",
      "        line_width (:class:`~bokeh.core.properties.NumberSpec`\\ , optional):\n",
      "            The line width values for the horizontal bars. (default: 1)\n",
      "    \n",
      "        name (:class:`~bokeh.core.properties.Nullable`\\ (:class:`~bokeh.core.properties.String`\\ )):\n",
      "            An arbitrary, user-supplied name for this model.\n",
      "        \n",
      "            This name can be useful when querying the document to retrieve specific\n",
      "            Bokeh models.\n",
      "        \n",
      "            .. code:: python\n",
      "        \n",
      "                >>> plot.circle([1,2,3], [4,5,6], name=\"temp\")\n",
      "                >>> plot.select(name=\"temp\")\n",
      "                [GlyphRenderer(id='399d53f5-73e9-44d9-9527-544b761c7705', ...)]\n",
      "        \n",
      "            .. note::\n",
      "                No uniqueness guarantees or other conditions are enforced on any names\n",
      "                that are provided, nor is the name used directly by Bokeh for any\n",
      "                reason.\n",
      "    \n",
      "        syncable (:class:`~bokeh.core.properties.Bool`\\ , optional):\n",
      "            Indicates whether this model should be synchronized back to a Bokeh server when\n",
      "            updated in a web browser. Setting to ``False`` may be useful to reduce network\n",
      "            traffic when dealing with frequently updated objects whose updated values we\n",
      "            don't need.\n",
      "        \n",
      "            .. note::\n",
      "                Setting this property to ``False`` will prevent any ``on_change()`` callbacks\n",
      "                on this object from triggering. However, any JS-side callbacks will still\n",
      "                work. (default: True)\n",
      "    \n",
      "        tags (:class:`~bokeh.core.properties.List`\\ ):\n",
      "            An optional list of arbitrary, user-supplied values to attach to this\n",
      "            model.\n",
      "        \n",
      "            This data can be useful when querying the document to retrieve specific\n",
      "            Bokeh models:\n",
      "        \n",
      "            .. code:: python\n",
      "        \n",
      "                >>> r = plot.circle([1,2,3], [4,5,6])\n",
      "                >>> r.tags = [\"foo\", 10]\n",
      "                >>> plot.select(tags=['foo', 10])\n",
      "                [GlyphRenderer(id='1de4c3df-a83d-480a-899b-fb263d3d5dd9', ...)]\n",
      "        \n",
      "            Or simply a convenient way to attach any necessary metadata to a model\n",
      "            that can be accessed by ``CustomJS`` callbacks, etc.\n",
      "        \n",
      "            .. note::\n",
      "                No uniqueness guarantees or other conditions are enforced on any tags\n",
      "                that are provided, nor are the tags used directly by Bokeh for any\n",
      "                reason. (default: [])\n",
      "    \n",
      "    \n",
      "    \n",
      "    Other Parameters:\n",
      "        alpha (float, optional) :\n",
      "            An alias to set all alpha keyword arguments at once. (default: None)\n",
      "    \n",
      "            Alpha values must be between 0 (fully transparent) and 1 (fully opaque).\n",
      "    \n",
      "            Any explicitly set values for ``line_alpha``, etc. will override this\n",
      "            setting.\n",
      "    \n",
      "        color (color, optional) :\n",
      "            An alias to set all color keyword arguments at once. (default: None)\n",
      "    \n",
      "            See :ref:`userguide_styling_colors` in the user guide for different\n",
      "            options to define colors.\n",
      "    \n",
      "            Any explicitly set values for ``line_color``, etc. will override this\n",
      "            setting.\n",
      "    \n",
      "        legend_field (str, optional) :\n",
      "            Specify that the glyph should produce multiple legend entries by\n",
      "            :ref:`grouping them in the browser <userguide_annotations_legends_legend_field>`.\n",
      "            The value of this parameter is the name of a column in the data source\n",
      "            that should be used or the grouping.\n",
      "    \n",
      "            The grouping is performed *in JavaScript*, at the time time the Bokeh\n",
      "            content is rendered in the browser. If the data is subsequently updated,\n",
      "            the legend will automatically re-group.\n",
      "    \n",
      "            .. note::\n",
      "                Only one of ``legend_field``, ``legend_group``, or ``legend_label``\n",
      "                should be supplied\n",
      "    \n",
      "        legend_group (str, optional) :\n",
      "            Specify that the glyph should produce multiple legend entries by\n",
      "            :ref:`grouping them in Python <userguide_annotations_legends_legend_group>`.\n",
      "            The value of this parameter is the name of a column in the data source\n",
      "            that should be used or the grouping.\n",
      "    \n",
      "            The grouping is performed in Python, before the Bokeh output is sent to\n",
      "            a browser. If the date is subsequently updated, the legend will *not*\n",
      "            automatically re-group.\n",
      "    \n",
      "            .. note::\n",
      "                Only one of ``legend_field``, ``legend_group``, or ``legend_label``\n",
      "                should be supplied\n",
      "    \n",
      "        legend_label (str, optional) :\n",
      "            Specify that the glyph should produce a single\n",
      "            :ref:`basic legend label <userguide_annotations_legends_legend_label>` in\n",
      "            the legend. The legend entry is labeled with the exact text supplied\n",
      "            here.\n",
      "    \n",
      "            .. note::\n",
      "                Only one of ``legend_field``, ``legend_group``, or ``legend_label``\n",
      "                should be supplied.\n",
      "    \n",
      "        muted (bool, optionall) :\n",
      "            Whether the glyph should be rendered as muted (default: False)\n",
      "    \n",
      "            For this to be useful, an ``muted_glyph`` must be configured on the\n",
      "            returned ``GlyphRender``. This can be done by explicitly creating a\n",
      "            ``Glyph`` to use, or more simply by passing e.g. ``muted_color``, etc.\n",
      "            to this glyph function.\n",
      "    \n",
      "        name (str, optional) :\n",
      "            An optional user-supplied name to attach to the renderer (default: None)\n",
      "    \n",
      "            Bokeh does not use this value in any way, but it may be useful for\n",
      "            searching a Bokeh document to find a specific model.\n",
      "    \n",
      "        source (ColumnDataSource, optional) :\n",
      "            A user-supplied data source. (defatult: None)\n",
      "    \n",
      "            If not supplied, Bokeh will automatically construct an internal\n",
      "            ``ColumnDataSource`` with default column names from the coordinates and\n",
      "            other arguments that were passed-in as literal list or array values.\n",
      "    \n",
      "            If supplied, Bokeh will use the supplied data source to drive the glyph.\n",
      "            In this case, literal list or arrays may not be used for coordinates or\n",
      "            other arguments. Only singular fixed valued (e.g. ``x=10``) or column\n",
      "            names in the data source (e.g. ``x=\"time\"``) are permitted.\n",
      "    \n",
      "        view (CDSView, optional) :\n",
      "            A view for filtering the data source. (default: None)\n",
      "    \n",
      "        visible (bool, optional) :\n",
      "            Whether the glyph should be rendered. (default: True)\n",
      "    \n",
      "        x_range_name (str, optional) :\n",
      "            The name of an extra range to use for mapping x-coordinates.\n",
      "            (default: None)\n",
      "    \n",
      "            If not supplied, then the default ``y_range`` of the plot will be used\n",
      "            for coordinate mapping.\n",
      "    \n",
      "        y_range_name (str, optional) :\n",
      "            The name of an extra range to use for mapping y-coordinates.\n",
      "            (default: None)\n",
      "    \n",
      "            If not supplied, then the default ``y_range`` of the plot will be used\n",
      "            for coordinate mapping.\n",
      "    \n",
      "        level (RenderLevel, optional) :\n",
      "            Specify the render level order for this glyph.\n",
      "    \n",
      "    \n",
      "    \n",
      "    It is also possible to set the color and alpha parameters of extra glyphs for\n",
      "    selection, nonselection, hover, or muted. To do so, add the relevant prefix to\n",
      "    any visual parameter. For example, pass ``nonselection_alpha`` to set the line\n",
      "    and fill alpha for nonselect, or ``hover_fill_alpha`` to set the fill alpha for\n",
      "    hover. See the :ref:`userguide_styling_glyphs` section of the user guide for\n",
      "    full details.\n",
      "    \n",
      "    Returns:\n",
      "        :class:`~bokeh.models.renderers.GlyphRenderer`\n",
      "    \n",
      "    \n",
      "    Examples:\n",
      "    \n",
      "        .. code-block:: python\n",
      "    \n",
      "            from bokeh.plotting import figure, output_file, show\n",
      "    \n",
      "            plot = figure(width=300, height=300)\n",
      "            plot.hbar(y=[1, 2, 3], height=0.5, left=0, right=[1,2,3], color=\"#CAB2D6\")\n",
      "    \n",
      "            show(plot)\n",
      "\n"
     ]
    }
   ],
   "source": [
    "help(p.hbar)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "51b5df6e",
   "metadata": {},
   "source": [
    "## 案例1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "6d65c581",
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.models import ColumnDataSource, NumeralTickFormatter, SingleIntervalTicker"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "09b16a9c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"c198c83e-6dc6-46ef-95f0-5b98f664034a\" data-root-id=\"1221\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  const docs_json = {\"ccb0ea09-f3bc-4979-a5bd-cc4e00d4e0ed\":{\"defs\":[],\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"1232\"}],\"center\":[{\"id\":\"1234\"},{\"id\":\"1238\"}],\"height\":350,\"left\":[{\"id\":\"1235\"}],\"renderers\":[{\"id\":\"1259\"}],\"title\":{\"id\":\"1222\"},\"toolbar\":{\"id\":\"1247\"},\"x_range\":{\"id\":\"1224\"},\"x_scale\":{\"id\":\"1228\"},\"y_range\":{\"id\":\"1226\"},\"y_scale\":{\"id\":\"1230\"}},\"id\":\"1221\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{},\"id\":\"1230\",\"type\":\"LinearScale\"},{\"attributes\":{},\"id\":\"1244\",\"type\":\"HelpTool\"},{\"attributes\":{\"coordinates\":null,\"group\":null,\"text\":\"Fruits Counts\"},\"id\":\"1222\",\"type\":\"Title\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.2},\"fill_color\":{\"value\":\"violet\"},\"hatch_alpha\":{\"value\":0.2},\"hatch_color\":{\"value\":\"violet\"},\"line_alpha\":{\"value\":0.2},\"line_color\":{\"value\":\"violet\"},\"top\":{\"field\":\"counts\"},\"width\":{\"value\":0.8},\"x\":{\"field\":\"x\"}},\"id\":\"1258\",\"type\":\"VBar\"},{\"attributes\":{\"coordinates\":null,\"data_source\":{\"id\":\"1220\"},\"glyph\":{\"id\":\"1256\"},\"group\":null,\"hover_glyph\":null,\"muted_glyph\":{\"id\":\"1258\"},\"nonselection_glyph\":{\"id\":\"1257\"},\"view\":{\"id\":\"1260\"}},\"id\":\"1259\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"coordinates\":null,\"formatter\":{\"id\":\"1288\"},\"group\":null,\"major_label_policy\":{\"id\":\"1289\"},\"ticker\":{\"id\":\"1233\"}},\"id\":\"1232\",\"type\":\"CategoricalAxis\"},{\"attributes\":{},\"id\":\"1236\",\"type\":\"BasicTicker\"},{\"attributes\":{\"coordinates\":null,\"formatter\":{\"id\":\"1285\"},\"group\":null,\"major_label_policy\":{\"id\":\"1286\"},\"ticker\":{\"id\":\"1236\"}},\"id\":\"1235\",\"type\":\"LinearAxis\"},{\"attributes\":{\"bottom_units\":\"screen\",\"coordinates\":null,\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"group\":null,\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"syncable\":false,\"top_units\":\"screen\"},\"id\":\"1245\",\"type\":\"BoxAnnotation\"},{\"attributes\":{},\"id\":\"1285\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"data\":{\"counts\":[1,3,4,2,4,6],\"x\":[\"Apples\",\"Pears\",\"Nectarines\",\"Plums\",\"Grapes\",\"Strawberries\"]},\"selected\":{\"id\":\"1291\"},\"selection_policy\":{\"id\":\"1290\"}},\"id\":\"1220\",\"type\":\"ColumnDataSource\"},{\"attributes\":{},\"id\":\"1289\",\"type\":\"AllLabels\"},{\"attributes\":{},\"id\":\"1286\",\"type\":\"AllLabels\"},{\"attributes\":{},\"id\":\"1290\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"axis\":{\"id\":\"1235\"},\"coordinates\":null,\"dimension\":1,\"group\":null,\"ticker\":null},\"id\":\"1238\",\"type\":\"Grid\"},{\"attributes\":{\"fill_color\":{\"value\":\"violet\"},\"hatch_color\":{\"value\":\"violet\"},\"line_color\":{\"value\":\"violet\"},\"top\":{\"field\":\"counts\"},\"width\":{\"value\":0.8},\"x\":{\"field\":\"x\"}},\"id\":\"1256\",\"type\":\"VBar\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"violet\"},\"hatch_alpha\":{\"value\":0.1},\"hatch_color\":{\"value\":\"violet\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"violet\"},\"top\":{\"field\":\"counts\"},\"width\":{\"value\":0.8},\"x\":{\"field\":\"x\"}},\"id\":\"1257\",\"type\":\"VBar\"},{\"attributes\":{\"factors\":[\"Apples\",\"Pears\",\"Nectarines\",\"Plums\",\"Grapes\",\"Strawberries\"]},\"id\":\"1224\",\"type\":\"FactorRange\"},{\"attributes\":{\"callback\":null,\"tooltips\":[[\"variety\",\"@x\"],[\"count\",\"@counts\"]]},\"id\":\"1246\",\"type\":\"HoverTool\"},{\"attributes\":{\"tools\":[{\"id\":\"1239\"},{\"id\":\"1240\"},{\"id\":\"1241\"},{\"id\":\"1242\"},{\"id\":\"1243\"},{\"id\":\"1244\"},{\"id\":\"1246\"}]},\"id\":\"1247\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"1291\",\"type\":\"Selection\"},{\"attributes\":{},\"id\":\"1239\",\"type\":\"PanTool\"},{\"attributes\":{\"end\":7,\"start\":0},\"id\":\"1226\",\"type\":\"DataRange1d\"},{\"attributes\":{\"source\":{\"id\":\"1220\"}},\"id\":\"1260\",\"type\":\"CDSView\"},{\"attributes\":{},\"id\":\"1288\",\"type\":\"CategoricalTickFormatter\"},{\"attributes\":{},\"id\":\"1240\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"axis\":{\"id\":\"1232\"},\"coordinates\":null,\"grid_line_color\":null,\"group\":null,\"ticker\":null},\"id\":\"1234\",\"type\":\"Grid\"},{\"attributes\":{\"overlay\":{\"id\":\"1245\"}},\"id\":\"1241\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"1242\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"1243\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"1233\",\"type\":\"CategoricalTicker\"},{\"attributes\":{},\"id\":\"1228\",\"type\":\"CategoricalScale\"}],\"root_ids\":[\"1221\"]},\"title\":\"Bokeh Application\",\"version\":\"2.4.2\"}};\n",
       "  const render_items = [{\"docid\":\"ccb0ea09-f3bc-4979-a5bd-cc4e00d4e0ed\",\"root_ids\":[\"1221\"],\"roots\":{\"1221\":\"c198c83e-6dc6-46ef-95f0-5b98f664034a\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    let attempts = 0;\n",
       "    const timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else {\n",
       "        attempts++;\n",
       "        if (attempts > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "1221"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "# 数据准备（名称和值）\n",
    "fruits = ['Apples', 'Pears', 'Nectarines', 'Plums', 'Grapes', 'Strawberries']\n",
    "counts = [1, 3, 4, 2, 4, 6]\n",
    "\n",
    "# 数据源准备\n",
    "source = ColumnDataSource(\n",
    "    data = dict(x = fruits,counts = counts)\n",
    ")\n",
    "\n",
    "TOOLTIPS = [(\"variety\",\"@x\"),(\"count\", \"@counts\") ]\n",
    "\n",
    "# 画布\n",
    "p = figure(\n",
    "    x_range=fruits,\n",
    "    plot_height=350,\n",
    "    title=\"Fruits Counts\",\n",
    "    tooltips=TOOLTIPS\n",
    ")\n",
    "\n",
    "# 绘制\n",
    "p.vbar(x='x',top='counts',color='violet',width=0.8,source=source)\n",
    "p.y_range.end=7\n",
    "\n",
    "# 坐标轴设置\n",
    "p.xgrid.grid_line_color = None\n",
    "p.y_range.start = 0 \n",
    "# p.legend.location=\"left\"\n",
    "\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5e9b8905",
   "metadata": {},
   "source": [
    "## 课堂实践"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "ba6fe6ce",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-root\">\n",
       "        <a href=\"https://bokeh.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"1343\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  const force = true;\n",
       "\n",
       "  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
       "    root._bokeh_onload_callbacks = [];\n",
       "    root._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "  const JS_MIME_TYPE = 'application/javascript';\n",
       "  const HTML_MIME_TYPE = 'text/html';\n",
       "  const EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n",
       "  const CLASS_NAME = 'output_bokeh rendered_html';\n",
       "\n",
       "  /**\n",
       "   * Render data to the DOM node\n",
       "   */\n",
       "  function render(props, node) {\n",
       "    const script = document.createElement(\"script\");\n",
       "    node.appendChild(script);\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when an output is cleared or removed\n",
       "   */\n",
       "  function handleClearOutput(event, handle) {\n",
       "    const cell = handle.cell;\n",
       "\n",
       "    const id = cell.output_area._bokeh_element_id;\n",
       "    const server_id = cell.output_area._bokeh_server_id;\n",
       "    // Clean up Bokeh references\n",
       "    if (id != null && id in Bokeh.index) {\n",
       "      Bokeh.index[id].model.document.clear();\n",
       "      delete Bokeh.index[id];\n",
       "    }\n",
       "\n",
       "    if (server_id !== undefined) {\n",
       "      // Clean up Bokeh references\n",
       "      const cmd_clean = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n",
       "      cell.notebook.kernel.execute(cmd_clean, {\n",
       "        iopub: {\n",
       "          output: function(msg) {\n",
       "            const id = msg.content.text.trim();\n",
       "            if (id in Bokeh.index) {\n",
       "              Bokeh.index[id].model.document.clear();\n",
       "              delete Bokeh.index[id];\n",
       "            }\n",
       "          }\n",
       "        }\n",
       "      });\n",
       "      // Destroy server and session\n",
       "      const cmd_destroy = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n",
       "      cell.notebook.kernel.execute(cmd_destroy);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  /**\n",
       "   * Handle when a new output is added\n",
       "   */\n",
       "  function handleAddOutput(event, handle) {\n",
       "    const output_area = handle.output_area;\n",
       "    const output = handle.output;\n",
       "\n",
       "    // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n",
       "    if ((output.output_type != \"display_data\") || (!Object.prototype.hasOwnProperty.call(output.data, EXEC_MIME_TYPE))) {\n",
       "      return\n",
       "    }\n",
       "\n",
       "    const toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n",
       "      toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n",
       "      // store reference to embed id on output_area\n",
       "      output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "    }\n",
       "    if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "      const bk_div = document.createElement(\"div\");\n",
       "      bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "      const script_attrs = bk_div.children[0].attributes;\n",
       "      for (let i = 0; i < script_attrs.length; i++) {\n",
       "        toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "        toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent\n",
       "      }\n",
       "      // store reference to server id on output_area\n",
       "      output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "    }\n",
       "  }\n",
       "\n",
       "  function register_renderer(events, OutputArea) {\n",
       "\n",
       "    function append_mime(data, metadata, element) {\n",
       "      // create a DOM node to render to\n",
       "      const toinsert = this.create_output_subarea(\n",
       "        metadata,\n",
       "        CLASS_NAME,\n",
       "        EXEC_MIME_TYPE\n",
       "      );\n",
       "      this.keyboard_manager.register_events(toinsert);\n",
       "      // Render to node\n",
       "      const props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "      render(props, toinsert[toinsert.length - 1]);\n",
       "      element.append(toinsert);\n",
       "      return toinsert\n",
       "    }\n",
       "\n",
       "    /* Handle when an output is cleared or removed */\n",
       "    events.on('clear_output.CodeCell', handleClearOutput);\n",
       "    events.on('delete.Cell', handleClearOutput);\n",
       "\n",
       "    /* Handle when a new output is added */\n",
       "    events.on('output_added.OutputArea', handleAddOutput);\n",
       "\n",
       "    /**\n",
       "     * Register the mime type and append_mime function with output_area\n",
       "     */\n",
       "    OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "      /* Is output safe? */\n",
       "      safe: true,\n",
       "      /* Index of renderer in `output_area.display_order` */\n",
       "      index: 0\n",
       "    });\n",
       "  }\n",
       "\n",
       "  // register the mime type if in Jupyter Notebook environment and previously unregistered\n",
       "  if (root.Jupyter !== undefined) {\n",
       "    const events = require('base/js/events');\n",
       "    const OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  \n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  const NB_LOAD_WARNING = {'data': {'text/html':\n",
       "     \"<div style='background-color: #fdd'>\\n\"+\n",
       "     \"<p>\\n\"+\n",
       "     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n",
       "     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n",
       "     \"</p>\\n\"+\n",
       "     \"<ul>\\n\"+\n",
       "     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n",
       "     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n",
       "     \"</ul>\\n\"+\n",
       "     \"<code>\\n\"+\n",
       "     \"from bokeh.resources import INLINE\\n\"+\n",
       "     \"output_notebook(resources=INLINE)\\n\"+\n",
       "     \"</code>\\n\"+\n",
       "     \"</div>\"}};\n",
       "\n",
       "  function display_loaded() {\n",
       "    const el = document.getElementById(\"1343\");\n",
       "    if (el != null) {\n",
       "      el.textContent = \"BokehJS is loading...\";\n",
       "    }\n",
       "    if (root.Bokeh !== undefined) {\n",
       "      if (el != null) {\n",
       "        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n",
       "      }\n",
       "    } else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(display_loaded, 100)\n",
       "    }\n",
       "  }\n",
       "\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) {\n",
       "        if (callback != null)\n",
       "          callback();\n",
       "      });\n",
       "    } finally {\n",
       "      delete root._bokeh_onload_callbacks\n",
       "    }\n",
       "    console.debug(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(css_urls, js_urls, callback) {\n",
       "    if (css_urls == null) css_urls = [];\n",
       "    if (js_urls == null) js_urls = [];\n",
       "\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls == null || js_urls.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    root._bokeh_is_loading = css_urls.length + js_urls.length;\n",
       "\n",
       "    function on_load() {\n",
       "      root._bokeh_is_loading--;\n",
       "      if (root._bokeh_is_loading === 0) {\n",
       "        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n",
       "        run_callbacks()\n",
       "      }\n",
       "    }\n",
       "\n",
       "    function on_error(url) {\n",
       "      console.error(\"failed to load \" + url);\n",
       "    }\n",
       "\n",
       "    for (let i = 0; i < css_urls.length; i++) {\n",
       "      const url = css_urls[i];\n",
       "      const element = document.createElement(\"link\");\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error.bind(null, url);\n",
       "      element.rel = \"stylesheet\";\n",
       "      element.type = \"text/css\";\n",
       "      element.href = url;\n",
       "      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n",
       "      document.body.appendChild(element);\n",
       "    }\n",
       "\n",
       "    for (let i = 0; i < js_urls.length; i++) {\n",
       "      const url = js_urls[i];\n",
       "      const element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error.bind(null, url);\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "  };\n",
       "\n",
       "  function inject_raw_css(css) {\n",
       "    const element = document.createElement(\"style\");\n",
       "    element.appendChild(document.createTextNode(css));\n",
       "    document.body.appendChild(element);\n",
       "  }\n",
       "\n",
       "  \n",
       "  const js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js\"];\n",
       "  const css_urls = [];\n",
       "  \n",
       "\n",
       "  const inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    function(Bokeh) {\n",
       "    \n",
       "    \n",
       "    }\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    \n",
       "    if (root.Bokeh !== undefined || force === true) {\n",
       "      \n",
       "    for (let i = 0; i < inline_js.length; i++) {\n",
       "      inline_js[i].call(root, root.Bokeh);\n",
       "    }\n",
       "    if (force === true) {\n",
       "        display_loaded();\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    } else if (force !== true) {\n",
       "      const cell = $(document.getElementById(\"1343\")).parents('.cell').data().cell;\n",
       "      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n",
       "    }\n",
       "\n",
       "  }\n",
       "\n",
       "  if (root._bokeh_is_loading === 0) {\n",
       "    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(css_urls, js_urls, function() {\n",
       "      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(window));"
      ],
      "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  const force = true;\n\n  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n    root._bokeh_onload_callbacks = [];\n    root._bokeh_is_loading = undefined;\n  }\n\n  \n\n  \n  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  const NB_LOAD_WARNING = {'data': {'text/html':\n     \"<div style='background-color: #fdd'>\\n\"+\n     \"<p>\\n\"+\n     \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n     \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n     \"</p>\\n\"+\n     \"<ul>\\n\"+\n     \"<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\\n\"+\n     \"<li>use INLINE resources instead, as so:</li>\\n\"+\n     \"</ul>\\n\"+\n     \"<code>\\n\"+\n     \"from bokeh.resources import INLINE\\n\"+\n     \"output_notebook(resources=INLINE)\\n\"+\n     \"</code>\\n\"+\n     \"</div>\"}};\n\n  function display_loaded() {\n    const el = document.getElementById(\"1343\");\n    if (el != null) {\n      el.textContent = \"BokehJS is loading...\";\n    }\n    if (root.Bokeh !== undefined) {\n      if (el != null) {\n        el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n      }\n    } else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(display_loaded, 100)\n    }\n  }\n\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) {\n        if (callback != null)\n          callback();\n      });\n    } finally {\n      delete root._bokeh_onload_callbacks\n    }\n    console.debug(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(css_urls, js_urls, callback) {\n    if (css_urls == null) css_urls = [];\n    if (js_urls == null) js_urls = [];\n\n    root._bokeh_onload_callbacks.push(callback);\n    if (root._bokeh_is_loading > 0) {\n      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls == null || js_urls.length === 0) {\n      run_callbacks();\n      return null;\n    }\n    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n    root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n    function on_load() {\n      root._bokeh_is_loading--;\n      if (root._bokeh_is_loading === 0) {\n        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n        run_callbacks()\n      }\n    }\n\n    function on_error(url) {\n      console.error(\"failed to load \" + url);\n    }\n\n    for (let i = 0; i < css_urls.length; i++) {\n      const url = css_urls[i];\n      const element = document.createElement(\"link\");\n      element.onload = on_load;\n      element.onerror = on_error.bind(null, url);\n      element.rel = \"stylesheet\";\n      element.type = \"text/css\";\n      element.href = url;\n      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n      document.body.appendChild(element);\n    }\n\n    for (let i = 0; i < js_urls.length; i++) {\n      const url = js_urls[i];\n      const element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error.bind(null, url);\n      element.async = false;\n      element.src = url;\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n  };\n\n  function inject_raw_css(css) {\n    const element = document.createElement(\"style\");\n    element.appendChild(document.createTextNode(css));\n    document.body.appendChild(element);\n  }\n\n  \n  const js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js\"];\n  const css_urls = [];\n  \n\n  const inline_js = [\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    function(Bokeh) {\n    \n    \n    }\n  ];\n\n  function run_inline_js() {\n    \n    if (root.Bokeh !== undefined || force === true) {\n      \n    for (let i = 0; i < inline_js.length; i++) {\n      inline_js[i].call(root, root.Bokeh);\n    }\n    if (force === true) {\n        display_loaded();\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    } else if (force !== true) {\n      const cell = $(document.getElementById(\"1343\")).parents('.cell').data().cell;\n      cell.output_area.append_execute_result(NB_LOAD_WARNING)\n    }\n\n  }\n\n  if (root._bokeh_is_loading === 0) {\n    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n    run_inline_js();\n  } else {\n    load_libs(css_urls, js_urls, function() {\n      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n      run_inline_js();\n    });\n  }\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from bokeh.plotting import output_notebook,figure,show\n",
    "from bokeh.models import ColumnDataSource\n",
    "from bokeh.palettes import Spectral6\n",
    "import pandas as pd\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "9c8575be",
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>Visualization_tools</th>\n",
       "      <th>Watch</th>\n",
       "      <th>Star</th>\n",
       "      <th>Fork</th>\n",
       "      <th>Commits</th>\n",
       "      <th>Contributors</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>matplotlib</td>\n",
       "      <td>533</td>\n",
       "      <td>9678</td>\n",
       "      <td>4143</td>\n",
       "      <td>29503</td>\n",
       "      <td>808</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>bokeh</td>\n",
       "      <td>396</td>\n",
       "      <td>11034</td>\n",
       "      <td>2526</td>\n",
       "      <td>17673</td>\n",
       "      <td>357</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>pyecharts</td>\n",
       "      <td>263</td>\n",
       "      <td>5387</td>\n",
       "      <td>1148</td>\n",
       "      <td>1321</td>\n",
       "      <td>18</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>seaborn</td>\n",
       "      <td>234</td>\n",
       "      <td>6038</td>\n",
       "      <td>970</td>\n",
       "      <td>2316</td>\n",
       "      <td>98</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>plotly</td>\n",
       "      <td>234</td>\n",
       "      <td>4928</td>\n",
       "      <td>1114</td>\n",
       "      <td>3370</td>\n",
       "      <td>76</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>5</th>\n",
       "      <td>ggplot2</td>\n",
       "      <td>329</td>\n",
       "      <td>3783</td>\n",
       "      <td>1427</td>\n",
       "      <td>4286</td>\n",
       "      <td>184</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "  Visualization_tools  Watch   Star  Fork  Commits  Contributors\n",
       "0          matplotlib    533   9678  4143    29503           808\n",
       "1               bokeh    396  11034  2526    17673           357\n",
       "2           pyecharts    263   5387  1148     1321            18\n",
       "3             seaborn    234   6038   970     2316            98\n",
       "4              plotly    234   4928  1114     3370            76\n",
       "5             ggplot2    329   3783  1427     4286           184"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df = pd.read_csv('week06_data.csv')\n",
    "df"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "ad129947",
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "0     9678\n",
       "1    11034\n",
       "2     5387\n",
       "3     6038\n",
       "4     4928\n",
       "5     3783\n",
       "Name: Star, dtype: int64"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df['Star']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "c926e643",
   "metadata": {},
   "outputs": [],
   "source": [
    "#数据准备\n",
    "source = ColumnDataSource(data=dict(\n",
    "    visual= df['Visualization_tools'],\n",
    "    star_counts=df['Star'],\n",
    "    color = Spectral6))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "1abcd20b",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"5ff2c70a-7686-444f-b878-5ff83e11e914\" data-root-id=\"1345\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  const docs_json = {\"2b2b82e0-fda7-4e68-b956-3e6d112ec915\":{\"defs\":[],\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"1356\"}],\"center\":[{\"id\":\"1358\"},{\"id\":\"1362\"},{\"id\":\"1395\"}],\"left\":[{\"id\":\"1359\"}],\"renderers\":[{\"id\":\"1383\"}],\"title\":{\"id\":\"1346\"},\"toolbar\":{\"id\":\"1371\"},\"x_range\":{\"id\":\"1348\"},\"x_scale\":{\"id\":\"1352\"},\"y_range\":{\"id\":\"1350\"},\"y_scale\":{\"id\":\"1354\"}},\"id\":\"1345\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{},\"id\":\"1366\",\"type\":\"SaveTool\"},{\"attributes\":{\"axis\":{\"id\":\"1356\"},\"coordinates\":null,\"grid_line_color\":null,\"group\":null,\"ticker\":null},\"id\":\"1358\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1368\",\"type\":\"HelpTool\"},{\"attributes\":{},\"id\":\"1393\",\"type\":\"Selection\"},{\"attributes\":{},\"id\":\"1352\",\"type\":\"CategoricalScale\"},{\"attributes\":{},\"id\":\"1354\",\"type\":\"LinearScale\"},{\"attributes\":{\"coordinates\":null,\"formatter\":{\"id\":\"1390\"},\"group\":null,\"major_label_policy\":{\"id\":\"1391\"},\"ticker\":{\"id\":\"1357\"}},\"id\":\"1356\",\"type\":\"CategoricalAxis\"},{\"attributes\":{},\"id\":\"1392\",\"type\":\"UnionRenderers\"},{\"attributes\":{},\"id\":\"1357\",\"type\":\"CategoricalTicker\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.2},\"fill_color\":{\"field\":\"color\"},\"hatch_alpha\":{\"value\":0.2},\"hatch_color\":{\"field\":\"color\"},\"line_alpha\":{\"value\":0.2},\"line_color\":{\"field\":\"color\"},\"top\":{\"field\":\"star_counts\"},\"width\":{\"value\":0.8},\"x\":{\"field\":\"visual\"}},\"id\":\"1382\",\"type\":\"VBar\"},{\"attributes\":{},\"id\":\"1387\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{},\"id\":\"1360\",\"type\":\"BasicTicker\"},{\"attributes\":{\"coordinates\":null,\"formatter\":{\"id\":\"1387\"},\"group\":null,\"major_label_policy\":{\"id\":\"1388\"},\"ticker\":{\"id\":\"1360\"}},\"id\":\"1359\",\"type\":\"LinearAxis\"},{\"attributes\":{\"overlay\":{\"id\":\"1369\"}},\"id\":\"1365\",\"type\":\"BoxZoomTool\"},{\"attributes\":{\"callback\":null,\"tooltips\":[[\"\\u5de5\\u5177\\u540d\\u79f0\",\"@visual\"],[\"\\u661f\\u6807\\u6570\\u91cf\",\"@star_counts\"]]},\"id\":\"1370\",\"type\":\"HoverTool\"},{\"attributes\":{\"end\":13000,\"start\":0},\"id\":\"1350\",\"type\":\"DataRange1d\"},{\"attributes\":{\"axis\":{\"id\":\"1359\"},\"coordinates\":null,\"dimension\":1,\"group\":null,\"ticker\":null},\"id\":\"1362\",\"type\":\"Grid\"},{\"attributes\":{\"label\":{\"field\":\"visual\"},\"renderers\":[{\"id\":\"1383\"}]},\"id\":\"1396\",\"type\":\"LegendItem\"},{\"attributes\":{\"coordinates\":null,\"group\":null,\"items\":[{\"id\":\"1396\"}]},\"id\":\"1395\",\"type\":\"Legend\"},{\"attributes\":{},\"id\":\"1391\",\"type\":\"AllLabels\"},{\"attributes\":{\"data\":{\"color\":[\"#3288bd\",\"#99d594\",\"#e6f598\",\"#fee08b\",\"#fc8d59\",\"#d53e4f\"],\"star_counts\":[9678,11034,5387,6038,4928,3783],\"visual\":[\"matplotlib\",\"bokeh\",\"pyecharts\",\"seaborn\",\"plotly\",\"ggplot2\"]},\"selected\":{\"id\":\"1393\"},\"selection_policy\":{\"id\":\"1392\"}},\"id\":\"1344\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"tools\":[{\"id\":\"1363\"},{\"id\":\"1364\"},{\"id\":\"1365\"},{\"id\":\"1366\"},{\"id\":\"1367\"},{\"id\":\"1368\"},{\"id\":\"1370\"}]},\"id\":\"1371\",\"type\":\"Toolbar\"},{\"attributes\":{\"source\":{\"id\":\"1344\"}},\"id\":\"1384\",\"type\":\"CDSView\"},{\"attributes\":{\"coordinates\":null,\"data_source\":{\"id\":\"1344\"},\"glyph\":{\"id\":\"1380\"},\"group\":null,\"hover_glyph\":null,\"muted_glyph\":{\"id\":\"1382\"},\"nonselection_glyph\":{\"id\":\"1381\"},\"view\":{\"id\":\"1384\"}},\"id\":\"1383\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"factors\":[\"matplotlib\",\"bokeh\",\"pyecharts\",\"seaborn\",\"plotly\",\"ggplot2\"]},\"id\":\"1348\",\"type\":\"FactorRange\"},{\"attributes\":{\"bottom_units\":\"screen\",\"coordinates\":null,\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"group\":null,\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"syncable\":false,\"top_units\":\"screen\"},\"id\":\"1369\",\"type\":\"BoxAnnotation\"},{\"attributes\":{\"coordinates\":null,\"group\":null,\"text\":\"2019\\u5e747\\u6708\\u5e38\\u89c1\\u53ef\\u89c6\\u5316\\u5de5\\u5177Github\\u6807\\u661f\\u6570\\u91cf\"},\"id\":\"1346\",\"type\":\"Title\"},{\"attributes\":{\"fill_color\":{\"field\":\"color\"},\"hatch_color\":{\"field\":\"color\"},\"line_color\":{\"field\":\"color\"},\"top\":{\"field\":\"star_counts\"},\"width\":{\"value\":0.8},\"x\":{\"field\":\"visual\"}},\"id\":\"1380\",\"type\":\"VBar\"},{\"attributes\":{},\"id\":\"1363\",\"type\":\"PanTool\"},{\"attributes\":{},\"id\":\"1367\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"1388\",\"type\":\"AllLabels\"},{\"attributes\":{},\"id\":\"1390\",\"type\":\"CategoricalTickFormatter\"},{\"attributes\":{},\"id\":\"1364\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"field\":\"color\"},\"hatch_alpha\":{\"value\":0.1},\"hatch_color\":{\"field\":\"color\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"field\":\"color\"},\"top\":{\"field\":\"star_counts\"},\"width\":{\"value\":0.8},\"x\":{\"field\":\"visual\"}},\"id\":\"1381\",\"type\":\"VBar\"}],\"root_ids\":[\"1345\"]},\"title\":\"Bokeh Application\",\"version\":\"2.4.2\"}};\n",
       "  const render_items = [{\"docid\":\"2b2b82e0-fda7-4e68-b956-3e6d112ec915\",\"root_ids\":[\"1345\"],\"roots\":{\"1345\":\"5ff2c70a-7686-444f-b878-5ff83e11e914\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    let attempts = 0;\n",
       "    const timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else {\n",
       "        attempts++;\n",
       "        if (attempts > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "1345"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "#工具条\n",
    "TOOLTIPS=[('工具名称','@visual'),('星标数量','@star_counts')]\n",
    "\n",
    "#画布\n",
    "p = figure(x_range=df['Visualization_tools'],title=\"2019年7月常见可视化工具Github标星数量\",tooltips=TOOLTIPS)\n",
    "\n",
    "#柱状图\n",
    "p.vbar(x='visual', top='star_counts',color='color',legend_field='visual',source=source,width=0.8) \n",
    "\n",
    "#坐标轴设置\n",
    "p.legend.location='top_right'\n",
    "p.xgrid.grid_line_color = None\n",
    "p.y_range.start = 0\n",
    "p.y_range.end = 13000\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "04e78215",
   "metadata": {},
   "source": [
    "## 课后实践（star,commits,contributes)分组柱状图"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "df9ced21",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"b0160fbc-b7c7-4a86-b326-637245c7fad5\" data-root-id=\"1491\"></div>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function embed_document(root) {\n",
       "    \n",
       "  const docs_json = {\"99fb6c8c-3b92-42ee-8a7b-907db48168f8\":{\"defs\":[],\"roots\":{\"references\":[{\"attributes\":{\"below\":[{\"id\":\"1501\"}],\"center\":[{\"id\":\"1503\"},{\"id\":\"1507\"}],\"height\":400,\"left\":[{\"id\":\"1504\"}],\"renderers\":[{\"id\":\"1528\"}],\"title\":{\"id\":\"1492\"},\"toolbar\":{\"id\":\"1516\"},\"x_range\":{\"id\":\"1490\"},\"x_scale\":{\"id\":\"1497\"},\"y_range\":{\"id\":\"1495\"},\"y_scale\":{\"id\":\"1499\"}},\"id\":\"1491\",\"subtype\":\"Figure\",\"type\":\"Plot\"},{\"attributes\":{\"coordinates\":null,\"data_source\":{\"id\":\"1489\"},\"glyph\":{\"id\":\"1525\"},\"group\":null,\"hover_glyph\":null,\"muted_glyph\":{\"id\":\"1527\"},\"nonselection_glyph\":{\"id\":\"1526\"},\"view\":{\"id\":\"1529\"}},\"id\":\"1528\",\"type\":\"GlyphRenderer\"},{\"attributes\":{\"coordinates\":null,\"formatter\":{\"id\":\"1577\"},\"group\":null,\"major_label_orientation\":1,\"major_label_policy\":{\"id\":\"1578\"},\"ticker\":{\"id\":\"1502\"}},\"id\":\"1501\",\"type\":\"CategoricalAxis\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.2},\"fill_color\":{\"value\":\"purple\"},\"hatch_alpha\":{\"value\":0.2},\"hatch_color\":{\"value\":\"purple\"},\"line_alpha\":{\"value\":0.2},\"line_color\":{\"value\":\"purple\"},\"top\":{\"field\":\"counts\"},\"width\":{\"value\":0.9},\"x\":{\"field\":\"x\"}},\"id\":\"1527\",\"type\":\"VBar\"},{\"attributes\":{},\"id\":\"1505\",\"type\":\"BasicTicker\"},{\"attributes\":{},\"id\":\"1579\",\"type\":\"UnionRenderers\"},{\"attributes\":{\"coordinates\":null,\"formatter\":{\"id\":\"1574\"},\"group\":null,\"major_label_policy\":{\"id\":\"1575\"},\"ticker\":{\"id\":\"1505\"}},\"id\":\"1504\",\"type\":\"LinearAxis\"},{\"attributes\":{},\"id\":\"1578\",\"type\":\"AllLabels\"},{\"attributes\":{\"bottom_units\":\"screen\",\"coordinates\":null,\"fill_alpha\":0.5,\"fill_color\":\"lightgrey\",\"group\":null,\"left_units\":\"screen\",\"level\":\"overlay\",\"line_alpha\":1.0,\"line_color\":\"black\",\"line_dash\":[4,4],\"line_width\":2,\"right_units\":\"screen\",\"syncable\":false,\"top_units\":\"screen\"},\"id\":\"1514\",\"type\":\"BoxAnnotation\"},{\"attributes\":{},\"id\":\"1499\",\"type\":\"LinearScale\"},{\"attributes\":{\"factors\":[[\"matplotlib\",\"Star\"],[\"matplotlib\",\"Commits\"],[\"matplotlib\",\"Contributors\"],[\"bokeh\",\"Star\"],[\"bokeh\",\"Commits\"],[\"bokeh\",\"Contributors\"],[\"pyecharts\",\"Star\"],[\"pyecharts\",\"Commits\"],[\"pyecharts\",\"Contributors\"],[\"seaborn\",\"Star\"],[\"seaborn\",\"Commits\"],[\"seaborn\",\"Contributors\"],[\"plotly\",\"Star\"],[\"plotly\",\"Commits\"],[\"plotly\",\"Contributors\"],[\"ggplot2\",\"Star\"],[\"ggplot2\",\"Commits\"],[\"ggplot2\",\"Contributors\"]],\"range_padding\":0.1},\"id\":\"1490\",\"type\":\"FactorRange\"},{\"attributes\":{},\"id\":\"1577\",\"type\":\"CategoricalTickFormatter\"},{\"attributes\":{},\"id\":\"1580\",\"type\":\"Selection\"},{\"attributes\":{\"data\":{\"counts\":[9678,29503,808,11034,17673,357,5387,1321,18,6038,2316,98,4928,3370,76,3783,4286,184],\"x\":[[\"matplotlib\",\"Star\"],[\"matplotlib\",\"Commits\"],[\"matplotlib\",\"Contributors\"],[\"bokeh\",\"Star\"],[\"bokeh\",\"Commits\"],[\"bokeh\",\"Contributors\"],[\"pyecharts\",\"Star\"],[\"pyecharts\",\"Commits\"],[\"pyecharts\",\"Contributors\"],[\"seaborn\",\"Star\"],[\"seaborn\",\"Commits\"],[\"seaborn\",\"Contributors\"],[\"plotly\",\"Star\"],[\"plotly\",\"Commits\"],[\"plotly\",\"Contributors\"],[\"ggplot2\",\"Star\"],[\"ggplot2\",\"Commits\"],[\"ggplot2\",\"Contributors\"]]},\"selected\":{\"id\":\"1580\"},\"selection_policy\":{\"id\":\"1579\"}},\"id\":\"1489\",\"type\":\"ColumnDataSource\"},{\"attributes\":{\"axis\":{\"id\":\"1504\"},\"coordinates\":null,\"dimension\":1,\"group\":null,\"ticker\":null},\"id\":\"1507\",\"type\":\"Grid\"},{\"attributes\":{},\"id\":\"1575\",\"type\":\"AllLabels\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.5},\"fill_color\":{\"value\":\"purple\"},\"hatch_alpha\":{\"value\":0.5},\"hatch_color\":{\"value\":\"purple\"},\"line_alpha\":{\"value\":0.5},\"line_color\":{\"value\":\"purple\"},\"top\":{\"field\":\"counts\"},\"width\":{\"value\":0.9},\"x\":{\"field\":\"x\"}},\"id\":\"1525\",\"type\":\"VBar\"},{\"attributes\":{\"coordinates\":null,\"group\":null,\"text\":\"\\u5173\\u4e8e\\u6bcf\\u4e2a\\u5de5\\u5177\\u7684\\u6536\\u85cf\\u3001\\u786e\\u8ba4\\u53ca\\u8d21\\u732e\\u6570\\u636e\"},\"id\":\"1492\",\"type\":\"Title\"},{\"attributes\":{\"callback\":null,\"tooltips\":[[\"\\u5de5\\u5177\\u540d\\u79f0\",\"@visual\"],[\"\\u661f\\u6807\\u6570\\u91cf\",\"@star_counts\"]]},\"id\":\"1515\",\"type\":\"HoverTool\"},{\"attributes\":{\"tools\":[{\"id\":\"1508\"},{\"id\":\"1509\"},{\"id\":\"1510\"},{\"id\":\"1511\"},{\"id\":\"1512\"},{\"id\":\"1513\"},{\"id\":\"1515\"}]},\"id\":\"1516\",\"type\":\"Toolbar\"},{\"attributes\":{},\"id\":\"1508\",\"type\":\"PanTool\"},{\"attributes\":{},\"id\":\"1574\",\"type\":\"BasicTickFormatter\"},{\"attributes\":{\"start\":0},\"id\":\"1495\",\"type\":\"DataRange1d\"},{\"attributes\":{},\"id\":\"1512\",\"type\":\"ResetTool\"},{\"attributes\":{},\"id\":\"1509\",\"type\":\"WheelZoomTool\"},{\"attributes\":{\"axis\":{\"id\":\"1501\"},\"coordinates\":null,\"grid_line_color\":null,\"group\":null,\"ticker\":null},\"id\":\"1503\",\"type\":\"Grid\"},{\"attributes\":{\"overlay\":{\"id\":\"1514\"}},\"id\":\"1510\",\"type\":\"BoxZoomTool\"},{\"attributes\":{},\"id\":\"1511\",\"type\":\"SaveTool\"},{\"attributes\":{},\"id\":\"1502\",\"type\":\"CategoricalTicker\"},{\"attributes\":{\"fill_alpha\":{\"value\":0.1},\"fill_color\":{\"value\":\"purple\"},\"hatch_alpha\":{\"value\":0.1},\"hatch_color\":{\"value\":\"purple\"},\"line_alpha\":{\"value\":0.1},\"line_color\":{\"value\":\"purple\"},\"top\":{\"field\":\"counts\"},\"width\":{\"value\":0.9},\"x\":{\"field\":\"x\"}},\"id\":\"1526\",\"type\":\"VBar\"},{\"attributes\":{},\"id\":\"1497\",\"type\":\"CategoricalScale\"},{\"attributes\":{},\"id\":\"1513\",\"type\":\"HelpTool\"},{\"attributes\":{\"source\":{\"id\":\"1489\"}},\"id\":\"1529\",\"type\":\"CDSView\"}],\"root_ids\":[\"1491\"]},\"title\":\"Bokeh Application\",\"version\":\"2.4.2\"}};\n",
       "  const render_items = [{\"docid\":\"99fb6c8c-3b92-42ee-8a7b-907db48168f8\",\"root_ids\":[\"1491\"],\"roots\":{\"1491\":\"b0160fbc-b7c7-4a86-b326-637245c7fad5\"}}];\n",
       "  root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "\n",
       "  }\n",
       "  if (root.Bokeh !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    let attempts = 0;\n",
       "    const timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else {\n",
       "        attempts++;\n",
       "        if (attempts > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);"
      ],
      "application/vnd.bokehjs_exec.v0+json": ""
     },
     "metadata": {
      "application/vnd.bokehjs_exec.v0+json": {
       "id": "1491"
      }
     },
     "output_type": "display_data"
    }
   ],
   "source": [
    "from bokeh.models import ColumnDataSource, FactorRange\n",
    "\n",
    "tools=df['Visualization_tools']\n",
    "factors=['Star','Commits','Contributors']     \n",
    "Star=df['Star']\n",
    "Commits=df['Commits']\n",
    "Contributors=df['Contributors']\n",
    "\n",
    "data={\n",
    "    'tools':tools,\n",
    "    'Star':Star,\n",
    "    'Commits':Commits,\n",
    "    'Contributors':Contributors\n",
    "}\n",
    "\n",
    "#数据处理\n",
    "x = [ (tool, factor) for tool in tools for factor in factors ]\n",
    "# 分组求和(堆叠总数)\n",
    "counts = sum(zip(data['Star'], data['Commits'], data['Contributors']), ()) \n",
    "source = ColumnDataSource(data=dict(x=x, counts=counts))\n",
    "\n",
    "# 画布\n",
    "p = figure(x_range=FactorRange(*x), plot_height=400, title=\"关于每个工具的收藏、确认及贡献数据\",tooltips=TOOLTIPS)\n",
    "\n",
    "#工具条\n",
    "TOOLTIPS=[('工具名称','@x'),('历史数量','@counts')]\n",
    "\n",
    "# 柱状图\n",
    "p.vbar(x='x', top='counts', width=0.9, source=source,color=\"purple\", alpha=0.5)\n",
    "\n",
    "# 其他\n",
    "p.y_range.start = 0\n",
    "p.x_range.range_padding = 0.1\n",
    "p.xaxis.major_label_orientation = 1\n",
    "p.xgrid.grid_line_color = None\n",
    "\n",
    "# 显示\n",
    "show(p)\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.10"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
